<template>
  <div class="Statistics-page-container">
    <!-- 开始的弹出层 -->
    <div>
      <van-popup
        v-model="ballright_show"
        :style="{ width: '100%',height: '20%'}"
        class="right_popup"
      >
        <!-- 弹出层内容组件 -->
        <div class="BallRight_container">
          <div class="Ball-right-selection_container">
            <van-row class="Ball-right_van-row">
              <van-col span="8">
                <div class="left_box" :style="{background : team1_color}">
                  <p @click="ballleft">{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text1}}</p>
                </div>
              </van-col>
              <van-col span="8" class="left_txt">请选择球权</van-col>
              <van-col span="8">
                <div class="right_box" :style="{background : team2_color} ">
                  <p @click="ballright">{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text2}}</p>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 导航栏 -->
    <div class="nav_contianer" :style="{background:'black',color:'white'}">
      <van-row>
        <van-col span="24">
          <van-nav-bar
            title="时间"
            left-text="返回"
            right-text="结束"
            left-arrow
            @click-left="back"
            @click-right="onClickRight"
          >
            <template #title>
              <div @click="pause">
                <van-count-down :time="time" ref="countDown" :style="{color:'white'}"/>
              </div>
            </template>
          </van-nav-bar>
        </van-col>
      </van-row>
    </div>

    <!-- 队伍信息 -->
    <div class="ranks_contianer">
      <div class="ranks_left" @click="showPopup({data: 'left'}, $event)" :style="{background : team1_color}">
        <p>{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text1}}</p>
      </div>
      <div class="ranks_right" @click="showPopup({data: 'right'}, $event)" :style="{background : team2_color} ">
        <p>{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text2}}</p>
      </div>
      <div class="ranks_center">
        <span>{{ team1_score }}</span>
        <span>:</span>
        <span>{{ team2_score }}</span>
      </div>
    </div>

    <!-- 场次 时间信息 -->
    <div class="times_contianer">
      <div class="times_left">
        <div class="times_left_top">
          <van-row>
            <van-col span="12">犯规</van-col>
            <van-col span="12" id="foultimes_left">{{ team1_Foul }}</van-col>
          </van-row>
        </div>
        <div class="times_left_bottom">
          <van-row>
            <van-col span="12">暂停</van-col>
            <van-col span="12" >{{ team1_suspend }}</van-col>
          </van-row>
        </div>
      </div>
      <div class="times_center">
        <van-row>
          <van-col span="8">
            <van-icon name="arrow-left" color="white" @click="frontSessions"/>
          </van-col>
          <van-col span="8" :style="{color:'white'}">{{ sessionsarr[this.sessions] }}</van-col>
          <van-col span="8">
            <van-icon name="arrow" color="white" @click="nextSessions"/>
          </van-col>
        </van-row>
      </div>
      <div class="times_right">
        <div class="times_right_top">
          <van-row>
            <van-col span="12">犯规</van-col>
            <van-col span="12" id="foultimes_right">{{ team2_Foul }}</van-col>
          </van-row>
        </div>
        <div class="times_right_bottom">
          <van-row>
            <van-col span="12">暂停</van-col>
            <van-col span="12">{{ team2_suspend }}</van-col>
          </van-row>
        </div>
      </div>
    </div>

    <!-- 球员信息统计 -->
    <!-- 按钮行为弹出层 -->
    <van-popup v-model="palyershow" duration="0.1" round position="bottom" :style="{ height: '36%' }" >
      <van-grid>
        <van-grid-item class="item_eight" @click="backboard($event)">
          <p>篮板</p>
        </van-grid-item>
        <van-grid-item class="item_eight" @click="Assists($event)">
          <p>助攻</p>
        </van-grid-item>
        <van-grid-item class="item_eight" @click="Capping($event)">
          <p>盖帽</p>
        </van-grid-item>
        <van-grid-item class="item_eight" @click="Snatch($event)">
          <p>抢断</p>

        </van-grid-item>
        <van-grid-item class="item_eight" @click="suspend($event)">
          <p>暂停</p>

        </van-grid-item>
        <van-grid-item class="item_eight" @click="Second_points($event)">
          <p>二分命中</p>

        </van-grid-item>
        <van-grid-item class="item_eight" @click="Three_points($event)">
          <p>三分命中</p>

        </van-grid-item>
        <van-grid-item class="item_eight" @click="FreeThrowHit($event)">
          <p>罚球命中</p>

        </van-grid-item>
        <van-grid-item class="item_three" @click="Foul($event)">
          <p>犯规</p>

        </van-grid-item>
        <van-grid-item class="item_three" @click="TechnicalFoul($event)">
          <p>技术犯规</p>

        </van-grid-item>
        <van-grid-item class="item_three" @click="PhysicaFoul($event)">
          <p>违体犯规</p>

        </van-grid-item>
        <van-grid-item class="item_three" @click="SeizePower($event)">
          <p>夺权</p>

        </van-grid-item>
      </van-grid>
    </van-popup>
    <div class="player_contianer">
      <!-- 球员信息 左-->
      <div class="player_contianer_left">
        <van-grid :column-num="2" :gutter="2">
          <van-grid-item class="van-grid-item_father"  v-for="(value,valueIndex) in this.team1_playerInfo" :key="valueIndex"  @click="showPopup({data: 'left',num: value.msg.Number,name:value.msg.name,id:valueIndex}, $event)">
            <div class="left_top_num">
              <p :id="'l'+valueIndex">0</p>
            </div>
            <div class="player_left_num player_num" >
              <p :style="{background : team1_color,color:'white'}">{{ value.msg.Number }}</p>
              <p>{{ value.msg.name }}</p>
            </div>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 球员信息 右-->
      <div class="player_contianer_right">
        <van-grid :column-num="2" :gutter="2">
          <van-grid-item v-for="(value, valueIndex) in this.team2_playerInfo" :key="valueIndex"  class="van-grid-item_father" @click="showPopup({data: 'right',num: value.msg.Number,name:value.msg.name,id:valueIndex}, $event)">
            <div class="left_top_num">
              <p :id="'r'+valueIndex">0</p>
            </div>
            <div class="player_right_num player_num">
              <p :style="{background : team2_color,color:'white'}">{{ value.msg.Number }}</p>
              <p>{{ value.msg.name }}</p>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <!-- 底部详细统计信息 -->
    <div class="Detailed_statistics">
      <!-- 未到场球员信息弹出层 -->
      <!-- 一队弹出层 -->
      <van-popup v-model="Absent_playerShow_left" :style="{ height: '30%' ,width:'60%'}">
        未到场球员
        <van-cell-group v-for="(item,index) in this.Absent_players" :key="index">
          <van-cell :value=item.msg.Number>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">{{ item.msg.name }}</span>
            </template>
          </van-cell>
        </van-cell-group>
      </van-popup>

      <!-- 二队弹出层 -->
      <van-popup v-model="Absent_playerShow_right" :style="{ height: '30%' ,width:'60%'}">
        未到场球员
        <van-cell-group v-for="(item,index) in this.Absent_players1" :key="index">
          <van-cell :value=item.msg.Number>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">{{ item.msg.name }}</span>
            </template>
          </van-cell>
        </van-cell-group>
        </van-popup>

      <!-- 未到场球员信息 -->
      <div class="Absent_player">
        <!-- 未到场球员信息  左 -->
        <div class="Absent_player_left" @click="Absent_left">
          <div class="Absent_player_left_icon">
            <van-icon name="failure" dot size="5vw"/>
          </div>
        </div>
        <!-- 未到场球员信息  右 -->
        <div class="Absent_player_right" @click="Absent_right">
          <div class="Absent_player_right_icon">
            <van-icon name="failure" dot size="5vw"/>
          </div>
      </div>
      </div>
      <!-- 底部黑色显示 -->
      <div class="statistics_father" @click="statisticsPopupShow">
        <div class="statistics">
          <van-row>
            <van-col span="24">
              <div class="van-col_left">
                <div class="van-col_left_left">
                  <div class="van-col_left_leftTop">
                    <!-- 队伍的名字 -->
                    {{ BallRight }}
                    {{ team1_name }}
                  </div>
                  <div class="van-col_left_leftBtm">
                    <van-row type="flex">
                      <van-col span="6">{{team1_time}}</van-col>
                      <van-col span="6">{{team1_num}}</van-col>
                      <van-col span="6">{{team1_playerName}}</van-col>
                    </van-row>
                  </div>
                </div>
                <div class="van-col_left_right">
                  <div class="van-col_left_rightTop">
                    <!-- 行为记录 -->
                    {{ begain }}
                    {{ this.team_distinguish ? team2_action : team1_action }}
                  </div>
                </div>
              </div>
              <div class="van-col_right">
                <div class="van-col_right_icon">
                  <van-icon name="delete" size="5vw"/>
                </div>
              </div>
            </van-col>
         </van-row>
        </div>
      </div>

    </div>

    <!-- 底部弹出popup页 -->
    <van-popup v-model="statisticsShow" position="right" :style="{ height: '100%',width: '100%' }" >
      <van-nav-bar
        class="van-nav-bar-statisticsShow"
        title="操作记录"
        left-text="返回"
        left-arrow
        @click-left="statisticsShow = !statisticsShow"
        :style="{background:'black'}"
      />
      <!-- 内容部分 -->
      <van-tabs v-model="activeName" class="van-tabs-content">
        <!-- 全部 -->
        <van-tab title="全部" name="a" > <!-- 全部操作记录 -->
          <div class="van-tab-container1" v-for="(i, index) in allList" :key="index"  :style="{ color:i.color }">
            <div class="van-tab-container1-left">
              <div class="van-tab-container1-left1">
                <p>{{ i.sessions }}</p>
                <p>{{ i.time }}</p>
              </div>
              <div class="van-tab-container1-left2">
                <p>{{ i.team }}</p>
                <p>{{ i.number }} {{ i.name }}</p>
              </div>
            </div>
            <div class="van-tab-container1-right" :style="{color:color}">
              <div class="van-tab-container1-right1">
                <p>{{ i.type }}</p>
              </div>
              <div class="van-tab-container1-right2" :style="{color:color}">
                <van-icon name="delete" size="5vw" class="van-tab-container1-icon" @click="remove({ data:i.time },$event)"/>
              </div>

            </div>
          </div>
        </van-tab>

        <!-- 得分 -->
        <van-tab title="得分" name="b">
          <div class="van-tab-container1" v-for="(i, index) in scoreList" :key="index"  :style="{ color:i.color }">
            <div class="van-tab-container1-left">
              <div class="van-tab-container1-left1">
                <p>{{ i.sessions }}</p>
                <p>{{ i.time }}</p>

              </div>
              <div class="van-tab-container1-left2">
                <p>{{ i.team }}</p>
                <p>{{ i.number }} {{ i.name }}</p>
              </div>
            </div>
            <div class="van-tab-container1-right" :style="{color:color}">
              <div class="van-tab-container1-right1">
                <p>{{ i.type }}</p>
              </div>
              <div class="van-tab-container1-right2" :style="{color:color}">
                <van-icon name="delete" size="5vw" class="van-tab-container1-icon" @click="remove({ data:i.time },$event)"/>

              </div>

            </div>
          </div>
        </van-tab>

        <!-- 犯规 -->
        <van-tab title="犯规" name="c">
          <div class="van-tab-container1" v-for="(i, index) in foulList" :key="index"  :style="{ color:i.color }">
            <div class="van-tab-container1-left">
              <div class="van-tab-container1-left1">
                <p>{{ i.sessions }}</p>
                <p>{{ i.time }}</p>

              </div>
              <div class="van-tab-container1-left2">
                <p>{{ i.team }}</p>
                <p>{{ i.number }} {{ i.name }}</p>
              </div>
            </div>
            <div class="van-tab-container1-right" :style="{color:color}">
              <div class="van-tab-container1-right1">
                <p>{{ i.type }}</p>
              </div>
              <div class="van-tab-container1-right2" :style="{color:color}">
                <van-icon name="delete" size="5vw" class="van-tab-container1-icon" @click="remove({ data:i.time },$event)"/>

              </div>

            </div>
          </div>
        </van-tab>
      </van-tabs>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'StatisticsPage',
  data () {
    return {
      begain: '',
      BallRight: '',
      // 球权选择器
      ballright_show: true,
      // 未到场球员
      Absent_players: '',
      Absent_players1: '',
      // 个人犯规次数
      aaa: 0,
      // 操作记录的文字颜色区分
      color: '',
      // 场次的节数：（第一节 ......）
      sessions: 0,
      sessionsarr: ['第一节', '第二节', '第三节', '第四节'],
      id: '',
      id_left: '',
      id_right: '',
      // 区分哪个球员点击号码
      team_distinguishNum: 0,
      // 区分点击的右边还是左边
      team_distinguish: '',

      // 得分行为的球员号码
      team1_num: '',

      // 得分行为的球员姓名
      team1_playerName: '',

      // 得分行为的队伍名字
      team1_name: '',

      // 得分行为的发生的时间
      team1_time: '',

      // 一队的得分
      team1_score: 0,

      // 一队的行为记录
      team1_action: '',

      // 一队球员的犯规次数
      team1_Foul: 0,

      // 二队球员的暂停次数
      team1_suspend: 0,

      // 获得一队的球员信息名单
      team1_playerInfo: this.$store.state.First_team.Starter,

      //  一队的未到场球员名单 team1_Absent_player
      team1_Absent_player: '',

      //  一队的的球服颜色 team1_color
      team1_color: this.$store.state.First_team.Kit_color,

      // 得分行为的球员号码
      team2_num: '',

      // 得分行为的球员姓名
      team2_playerName: '',

      // 得分行为的队伍名字
      team2_name: '',

      // 得分行为的发生的时间
      team2_time: '',

      // 二队的得分
      team2_score: 0,

      // 二队的行为记录
      team2_action: '',

      // 二队球员的犯规次数
      team2_Foul: 0,

      // 二队球员的暂停次数
      team2_suspend: 0,

      // 获得二队的球员信息名单
      team2_playerInfo: this.$store.state.Second_team.Starter,

      //  二队的未到场球员名单 team1_Absent_player
      team2_Absent_player: '',

      //  二队的的球服颜色 team1_color
      team2_color: this.$store.state.Second_team.Kit_color,

      // 球员信息统计的弹出层显示
      palyershow: false,

      // 未到场球员弹出层显示
      Absent_playerShow_left: false,
      Absent_playerShow_right: false,

      // 顶部导航栏时间倒计时
      time: 10 * 60 * 60 * 1000,

      // 顶部导航栏时间判断点击次数 控制时间暂停
      clickTimes: 0,

      // 底部详细信息弹出显示
      statisticsShow: false,
      activeName: 'a',
      o: [],
      obj: {
        id: '',
        color: '',
        sessions: '',
        team: '我奥一队',
        name: '格林',
        number: '23号',
        time: '26:38',
        type: '犯规'
      }
    }
  },
  computed: {
    ...mapState(['scoreList', 'endbisai', 'endData_obj', 'foulList', 'playerData', 'allList', 'First_team', 'Second_team', 'team1', 'CreateLeague', 'creatDataId', 'logoindex'])
  },
  methods: {
    ballleft() {
      this.BallRight = '第一队球权'
      this.begain = '比赛开始'
      this.ballright_show = !this.ballright_show
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      // 比赛开始前 将数据赋值给所有统计表 ， 方便后面向服务器发送数据
      const sf1 = this.First_team.Starter
      const sf2 = this.Second_team.Starter
      this.endData_obj.begaintime = document.querySelector('.van-count-down')
      this.endData_obj.First_team.Starter.push(sf1)
      this.endData_obj.Second_team.Starter.push(sf2)
      this.endData_obj.BallRight = this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text1

      console.log(this.allList)
    },
    ballright() {
      this.BallRight = '第二队球权'
      this.begain = '比赛开始'
      this.ballright_show = !this.ballright_show
    },
    // 第一队未到场队员
    Absent_left() {
      this.Absent_players = this.First_team.Absent_players
      this.Absent_playerShow_left = !this.Absent_playerShow_left
    },
    Absent_right() {
      this.Absent_players1 = this.Second_team.Absent_players
      this.Absent_playerShow_right = !this.Absent_playerShow_right
    },

    // 根据time删除对应的操作记录
    remove (time) {
      console.log(time.data)
      this.$store.commit('remove', time.data)
    },

    // 导航栏的返回按钮
    onClickLeft () {
      this.$toast('返回')
      console.log(this.$store.state.First_team.Starter)
    },

    // 导航栏的结束按钮
    onClickRight () {
      this.$toast('结束')
      // 将操作数据保存到vuex中
      this.endData_obj.allList = this.allList
      this.endData_obj.First_team.Kit_color = this.First_team.Kit_color
      this.endData_obj.First_team.Absent_players = this.First_team.Absent_players
      this.endData_obj.First_team.Starter = this.First_team.Starter
      this.endData_obj.Second_team.Kit_color = this.Second_team.Kit_color
      this.endData_obj.Second_team.Absent_players = this.Second_team.Absent_players
      this.endData_obj.Second_team.Starter = this.Second_team.Starter
      this.endData_obj.Second_team.total = this.team2_score
      this.endData_obj.First_team.total = this.team1_score

      if (this.team1_score >= this.team2_score) {
        this.endData_obj.winteam.name = this.First_team.name
        this.endData_obj.winteam.scoer = this.team1_score
        this.endData_obj.defaulteam.name = this.Second_team.name
        this.endData_obj.defaulteam.scoer = this.team2_score
      } else {
        this.endData_obj.winteam.name = this.Second_team.name
        this.endData_obj.winteam.scoer = this.team2_score
        this.endData_obj.defaulteam.name = this.First_team.name
        this.endData_obj.defaulteam.scoer = this.team1_score
      }
      // console.log(this.allList)
      console.log('所有的操作数据', this.endData_obj.allList)

      this.endbisai.splice(0, 0, this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId])
      console.log(this.endbisai)
    },
    // 上一节按钮
    frontSessions() {
      if (this.sessions <= 0) {
        this.sessions = 0
      } else {
        this.sessions--
      }
      this.$toast(
        this.sessionsarr[this.sessions]
      )
    },
    // 下一节按钮
    nextSessions() {
      if (this.sessions >= 3) {
        this.sessions = 3
      } else {
        this.sessions++
      }
      this.$toast(
        this.sessionsarr[this.sessions]
      )
      this.team1_Foul = 0
      this.team2_Foul = 0
      const mk1 = document.querySelector('#foultimes_right')
      const mk2 = document.querySelector('#foultimes_left')
      mk1.style.color = 'black'
      mk2.style.color = 'black'
    },
    // 球员信息统计的弹出层显示  方法
    showPopup (data, $event) {
      this.begain = '' // 开始时显示比赛开始
      this.BallRight = ''// 开始时显示哪一队球权
      // 给store 中的球员数据赋值
      // 将点击事件传递过来的值 储存到store 中
      console.log(data)
      this.playerData.name = data.name
      this.playerData.num = data.num
      this.playerData.data = data.data
      this.playerData.id = data.id

      // 给id赋值  用于判断左右队
      this.id = data.id
      // 获取得分行为球员信息 data ，并将data中的
      // 信息赋值给team1_num ，team1_playerName
      this.team1_num = data.num
      this.team1_playerName = data.name
      // 判断点击的队伍 然后将对应的队伍赋值给this.team1_name
      // 用于底部信息统计中显示 队伍名称
      if (data.data === 'right') {
        // 添加动态id
        this.id_right = 'r' + data.num
        console.log(this.$store.state.Second_team.Starter[0].flag)
        this.team1_name = this.$store.state.Second_team.Starter[0].flag
        // 将右边还是左边的信息赋值给team_distinguish
        // 用于判断哪个队伍得分 ( true 右边 ， false 左边)
        this.team_distinguish = true

        // 底部详细信息统计  如果是右队 则赋值右队的值

        this.obj.color = this.team2_color// 判断左右队颜色
        this.obj.name = data.name
        this.obj.team = this.team1_name
        this.obj.number = data.num
        this.obj.id = data.id
      } else {
        this.team1_name = this.$store.state.First_team.Starter[0].flag
        this.team_distinguish = false

        // 底部详细信息统计  如果是左队 则赋值左队的值
        this.team2_name = this.$store.state.First_team.Starter[0].flag

        this.obj.color = this.team1_color// 判断左右队颜色
        this.obj.name = data.name
        this.obj.team = this.team1_name
        this.obj.number = data.num
      }
      this.palyershow = true

      // 底部详细信息统计
      // 获取比赛节数
      this.obj.sessions = this.sessions
    },

    // 底部详细信息统计的弹出层显示  方法
    statisticsPopupShow () {
      this.statisticsShow = true
    },

    // 时间的暂停与播放
    pause () {
      this.clickTimes++
      // console.log(this.clickTimes)
      if (this.clickTimes % 2 === 0) {
        this.$refs.countDown.start()
      } else {
        this.$refs.countDown.pause()
      }
    },
    // 返回上一级路由
    back() {
      this.$router.go(-1)
    },
    // 行为方法
    backboard(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,
          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.team2_action = '篮板2'
      } else {
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,
          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        console.log(this.color)

        this.team1_action = '篮板1'
      }
      this.palyershow = !this.palyershow
    },
    Assists(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.team2_action = '助攻2'
      } else {
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.team1_action = '助攻1'
      }
      this.palyershow = !this.palyershow
    },
    Capping(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.team2_action = '盖帽2'
      } else {
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.team1_action = '盖帽1'
      }
      this.palyershow = !this.palyershow
    },
    Snatch(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.team2_action = '抢断2'
      } else {
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.team1_action = '抢断1'
      }
      this.palyershow = !this.palyershow
    },
    suspend(data) {
      // 时间暂停
      // 控制时间的点击次数++
      this.clickTimes++
      this.$refs.countDown.pause()

      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.team2_action = '暂停2'
        this.team2_suspend += 1
      } else {
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.team1_action = '暂停1'
        this.team1_suspend += 1
      }
      this.palyershow = !this.palyershow
    },
    Second_points(data) {
      // 将得分数据进行统计

      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.scoreList.push(obj1)// 将得分数据深拷贝的对象push到store 中

        this.team2_action = '二分命中2'
        this.team2_score += 2
      } else {
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,
          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.scoreList.push(obj1)
        this.team1_action = '二分命中1'
        this.team1_score += 2
      }

      this.palyershow = !this.palyershow
    },
    Three_points(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.scoreList.push(obj1)// 将得分数据深拷贝的对象push到store 中

        this.team2_action = '三分命中2'
        this.team2_score += 3
      } else {
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.scoreList.push(obj1)// 将得分数据深拷贝的对象push到store 中

        this.team1_action = '三分命中1'
        this.team1_score += 3
      }
      this.palyershow = !this.palyershow
    },
    FreeThrowHit(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.scoreList.push(obj1)// 将得分数据深拷贝的对象push到store 中

        this.team2_action = '罚球命中2'
        this.team2_score += 1
      } else {
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.scoreList.push(obj1)// 将得分数据深拷贝的对象push到store 中

        this.team1_action = '罚球命中1'
        this.team1_score += 1
      }
      this.palyershow = !this.palyershow
    },
    Foul(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 添加动态id
        this.id_right = 'r' + this.playerData.id
        // console.log(this.id_left)
        // 获取点击队员的左上角个人犯规p标签的id
        const leftTopP = document.getElementById(this.id_right)
        leftTopP.innerHTML++ // 个人犯规++

        if (leftTopP.innerHTML >= 5) { // 个人犯规达到5次  字体标红
          leftTopP.style.color = 'red'
        }
        console.log(this.team2_Foul)
        if (this.team2_Foul >= 4) {
          // 当团队犯规达到5次  团队犯规字体也标红
          document.querySelector('#foultimes_right').style.color = 'red'
        }
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          id: this.obj.id,
          color: this.obj.color,
          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中
        this.foulList.push(obj1)// 将犯规数据深拷贝的对象push到store中
        this.team2_action = '犯规2'// 二队添加行为赋值
        this.team2_Foul++ // 犯规次数++
      } else {
        // 添加动态id
        this.id_left = 'l' + this.playerData.id
        // console.log(this.id_left)
        // 获取点击队员的左上角个人犯规p标签的id
        const leftTopP = document.getElementById(this.id_left)
        leftTopP.innerHTML++ // 个人犯规++

        if (leftTopP.innerHTML >= 5) { // 个人犯规达到5次  字体标红
          leftTopP.style.color = 'red'
        }
        if (this.team1_Foul >= 4) {
          // 当团队犯规达到5次  团队犯规字体也标红
          document.querySelector('#foultimes_left').style.color = 'red'
        }
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,
          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.foulList.push(obj1)// 将犯规数据深拷贝的对象push到store中
        this.team1_Foul++
        this.team1_action = '犯规1'
      }
      this.palyershow = !this.palyershow
    },
    TechnicalFoul(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 添加动态id
        this.id_right = 'r' + this.playerData.id
        // console.log(this.id_left)
        // 获取点击队员的左上角个人犯规p标签的id
        const leftTopP = document.getElementById(this.id_right)
        leftTopP.innerHTML++ // 个人犯规++

        if (leftTopP.innerHTML >= 5) { // 个人犯规达到5次  字体标红
          leftTopP.style.color = 'red'
        }
        if (this.team1_Foul >= 4) {
          // 当团队犯规达到5次  团队犯规字体也标红
          document.querySelector('#foultimes_left').style.color = 'red'
        }
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.foulList.push(obj1)// 将犯规数据深拷贝的对象push到store中
        this.team2_Foul++ // 犯规次数++

        this.team2_action = '技术犯规2'
      } else {
        // 添加动态id
        this.id_left = 'l' + this.playerData.id
        // console.log(this.id_left)
        // 获取点击队员的左上角个人犯规p标签的id
        const leftTopP = document.getElementById(this.id_left)
        leftTopP.innerHTML++ // 个人犯规++

        if (leftTopP.innerHTML >= 5) { // 个人犯规达到5次  字体标红
          leftTopP.style.color = 'red'
        }
        if (this.team1_Foul >= 4) {
          // 当团队犯规达到5次  团队犯规字体也标红
          document.querySelector('#foultimes_left').style.color = 'red'
        }
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.foulList.push(obj1)// 将犯规数据深拷贝的对象push到store中
        this.team1_Foul++ // 犯规次数++

        this.team1_action = '技术犯规1'
      }
      this.palyershow = !this.palyershow
    },
    PhysicaFoul(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 添加动态id
        this.id_right = 'r' + this.playerData.id
        // console.log(this.id_left)
        // 获取点击队员的左上角个人犯规p标签的id
        const leftTopP = document.getElementById(this.id_right)
        leftTopP.innerHTML++ // 个人犯规++

        if (leftTopP.innerHTML >= 5) { // 个人犯规达到5次  字体标红
          leftTopP.style.color = 'red'
        }
        if (this.team1_Foul >= 4) {
          // 当团队犯规达到5次  团队犯规字体也标红
          document.querySelector('#foultimes_left').style.color = 'red'
        }
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.foulList.push(obj1)// 将犯规数据深拷贝的对象push到store中
        this.team2_Foul++ // 犯规次数++

        this.team2_action = '违体犯规2'
      } else {
        // 添加动态id
        this.id_left = 'l' + this.playerData.id
        // console.log(this.id_left)
        // 获取点击队员的左上角个人犯规p标签的id
        const leftTopP = document.getElementById(this.id_left)
        leftTopP.innerHTML++ // 个人犯规++

        if (leftTopP.innerHTML >= 5) { // 个人犯规达到5次  字体标红
          leftTopP.style.color = 'red'
        }
        if (this.team1_Foul >= 4) {
          // 当团队犯规达到5次  团队犯规字体也标红
          document.querySelector('#foultimes_left').style.color = 'red'
        }
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.foulList.push(obj1)// 将犯规数据深拷贝的对象push到store中
        this.team1_Foul++ // 犯规次数++

        this.team1_action = '违体犯规1'
      }
      this.palyershow = !this.palyershow
    },
    SeizePower(data) {
      // 获取得分行为发生的时间的Dom节点，并将时间按赋值给team1_time
      const times = document.querySelector('.van-count-down')
      this.team1_time = times.innerHTML
      if (this.team_distinguish) {
        // 添加动态id
        this.id_right = 'r' + this.playerData.id
        // console.log(this.id_left)
        // 获取点击队员的左上角个人犯规p标签的id
        const leftTopP = document.getElementById(this.id_right)
        leftTopP.innerHTML++ // 个人犯规++

        if (leftTopP.innerHTML >= 5) { // 个人犯规达到5次  字体标红
          leftTopP.style.color = 'red'
        }
        if (this.team1_Foul >= 4) {
          // 当团队犯规达到5次  团队犯规字体也标红
          document.querySelector('#foultimes_left').style.color = 'red'
        }
        // 二队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1) // 将深拷贝的对象push到o中
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.foulList.push(obj1)// 将犯规数据深拷贝的对象push到store中
        this.team2_Foul++ // 犯规次数++

        this.team2_action = '夺权2'
      } else {
        // 添加动态id
        this.id_left = 'l' + this.playerData.id
        // console.log(this.id_left)
        // 获取点击队员的左上角个人犯规p标签的id
        const leftTopP = document.getElementById(this.id_left)
        leftTopP.innerHTML++ // 个人犯规++

        if (leftTopP.innerHTML >= 5) { // 个人犯规达到5次  字体标红
          leftTopP.style.color = 'red'
        }
        if (this.team1_Foul >= 4) {
          // 当团队犯规达到5次  团队犯规字体也标红
          document.querySelector('#foultimes_left').style.color = 'red'
        }
        // 一队详情页面赋值
        this.obj.sessions = this.sessionsarr[this.sessions] // 节数赋值
        this.obj.type = data.target.innerHTML // 犯规性质
        this.obj.time = this.team1_time // 犯规时间

        // 解决 push 对象进数组 之前的对象被覆盖的问题
        // 需要重新申请一个内存空间，然后赋值给他，再push，实现深拷贝。
        const obj1 = {
          color: this.obj.color,

          sessions: this.obj.sessions,
          team: this.obj.team,
          name: this.obj.name,
          number: this.obj.number,
          time: this.obj.time,
          type: this.obj.type
        }
        this.o.push(obj1)
        this.allList.push(obj1) // 将深拷贝的对象push到allList中

        this.foulList.push(obj1)// 将犯规数据深拷贝的对象push到store中
        this.team1_Foul++ // 犯规次数++

        this.team1_action = '夺权1'
      }
      this.palyershow = !this.palyershow
    }
  }
}
</script>

<style scoped>
/* *{
  margin: 0;
  padding: 0;
} */
.Ball-right-selection_container{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  background: none;
}

.Ball-right_van-row{
  /* border: 2px solid blue; */
  text-align: center;
  line-height: 30vw;

}
.left_box{
  height: 30vw;
  width: 30vw;
  margin-left:5vw ;
  background-color: rgb(255, 79, 79);
  color: rgb(255, 255, 255);
  /* border: 2px solid rgb(64, 165, 64); */
  border-radius: 15vw;

}
.left_txt{
  /* background-color: #2ac1ef; */
  /* height: 100%; */
  margin-top: 4vw;
}
.right_box{
  height: 30vw;
  width: 30vw;
  margin-left:-2vw ;
  background-color: rgb(101, 155, 255);
  color: rgb(255, 255, 255);
  /* border: 2px solid rgb(64, 165, 64); */
  border-radius: 15vw;
}
.right_popup{
  background: none;
}
.ranks_contianer{
  height: 15vw;
  position: relative;
  border: 2px solid red;
}
.ranks_left,.ranks_right{
  width: 50%;
  height: 15vw;
  background-color: red;
  float: left;
  color: white;
  text-align: center;
}
.ranks_right{
  background-color: rgb(92, 163, 245);

}
.ranks_center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 20%;
  height: 10vw;
  border-radius: 1vw;
  background-color: aliceblue;
}
.ranks_center span{
  display: inline-block;
  width: 33%;
  height: 100%;
  text-align: center;
  line-height: 10vw;
  font-size: 5vw;
}
.times_contianer{
  position: relative;
  text-align: center;
  height: 15vw;
  width: 100%;
  border: 2px solid red;
}
.times_left,.times_center{
  height: 15vw;
    width: 15vw;
    /* border: 2px solid red; */
    float: left;
}
.times_left{
    margin-left: 3vw;
}
.times_center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  height: 12vw;
  width: 50vw;
  border-radius:1vw ;
  line-height: 12vw;
  background-color: rgb(73, 182, 149);
}
.times_right{
  margin-right: 3vw;
    height: 15vw;
    width: 15vw;
    /* border: 2px solid red; */
    float: right;
}
.times_left_top,.times_left_bottom,.times_right_bottom,.times_right_top{
  /* background-color: aqua; */
  width: 100%;
  height: 50%;
  line-height: 7.5vw;
  font-size: 2vw;
}
.player_contianer{
  border: 2px solid blue;
  /* height: 70vw; */
}
.player_contianer_left,.player_contianer_right{
  /* border: 2px solid rgb(0, 255, 200); */
  width: 50%;
  height: 100%;
  float: left;
  /* background-color: antiquewhite; */
}
/* .player_contianer_right{
  /* background-color: rgb(167, 167, 167); */
/* } */
 ::v-deep.van-grid-item__content{
  padding: 0;
}
.player_num{
  margin-top: 1.5vw;
}
.player_num p:first-child{
  width: 8vw;
  height: 8vw;
  background-color: red;
  border-radius: 4vw;
  text-align: center;
  line-height: 8vw;
  margin:0;
}
.player_num p:nth-child(2){
  width: 8vw;
  height: 6vw;
  text-align: center;
  line-height: 8vw;
  margin: 0;
  font-size: 2vw;
}

::v-deep.item_three .van-grid-item__content {
  background-color: red;
  color: white;
  font-size: 4vw;font-weight: 800;
}
::v-deep.item_eight .van-grid-item__content {
  background-color: rgb(64, 176, 190);
  color: white;
  font-size: 4vw;font-weight: 800;

}
::v-deep .van-grid-item__content p{
  width: 21vw;
  height: 17vw;
  text-align: center;
  color: #ffffff;
}
::v-deep .item_eight p{
  width: 21vw;
  height: 6vw;
  text-align: center;
  color: #ffffff;
}
.van-grid-item_father{
  position: relative;
  overflow: hidden;
}
.left_top_num{
  position: absolute;
  width: 8vw;
  height: 8vw;
  background-color: cadetblue;
  border-radius: 4vw;
  left: 0;
  top: 0;
  transform: translate(-40%,-40%);
}
.left_top_num p{
  width: 3vw;
  height: 3vw;
  position: relative;
  left: 50%;
  margin: 0;
  color: white;
  top: 50%;
}
.Detailed_statistics{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 22vw;
  /* border: 2px solid red; */
  text-align: center;
  /* background-color: white; */
}
.statistics_father{
  background-color: white;
}
.statistics,.Absent_player{
  width: 100%;
  height: 50%;
  /* background-color: antiquewhite; */
  line-height: 11vw;
}
.statistics{
  height: 11vw;

  width: 95%;
  background-color: black;
  color: rgb(255, 255, 255);
  margin: 0 auto;
  border-radius: 2vw;
}
.Absent_player_left,.Absent_player_right{
  position: relative;
  width: 49.5%;
  height: 100%;
  background-color: azure;
  float: left;
  box-sizing: border-box;
  /* border: 2px solid red; */
}
.Absent_player_left{
  margin-right:0.5vw ;
}
.Absent_player_right{
  margin-left:0.5vw ;
}
.Absent_player_left_icon,.Absent_player_right_icon{
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 8vw;
  height: 8vw;
  /* background-color: antiquewhite */
}
.van-col_left{
  float: left;
  width: 85%;
  height: 12vw;
  /* background-color: rgb(0, 0, 0); */
}
.van-col_left_left{
  float: left;
  width: 60%;
  height: 100%;
  /* background-color: antiquewhite; */
}
.van-col_right{
  position: relative;
  float: right;
  width: 15%;
  height: 12vw;
  /* background-color: aqua; */
}
.van-col_right_icon{
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-color: rgb(41, 41, 41);
  width: 10vw;
  height: 10vw;
  border-radius: 5vw;
}
::v-deep .van-col_right_icon .van-icon{
  margin-top: 2.5vw;
}
.van-col_left_leftTop,.van-col_left_leftBtm{
  height: 50%;
  /* background-color: aqua; */
  box-sizing: border-box;
  /* border: 2px solid red; */
}
.van-col_left_leftTop{
  line-height: 5vw;
  font-size: 2vw;
  text-align: left;
  padding-left:2vw ;
}
.van-col_left_leftBtm{
  line-height: 5vw;
  font-size: 2vw;
  text-align: center;
  padding-left:2vw ;
}
.van-col_left_right{
  /* background-color: antiquewhite; */
  width: 20vw;
  font-size: 3vw;
  height: 100%;
  float: right;
}

/* 操作记录 */
::v-deep  .van-ellipsis {
    color: #ffffff;
  }

::v-deep  .van-nav-bar .van-icon {
    color: #ffffff;
  }

::v-deep .van-nav-bar__text {
    color: #ffffff;
  }
.van-tabs-content{
  background-color: rgb(196, 196, 196);
}
.van-tab-container1{
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 15vw;
  margin-top: 0.5vw;
}
.van-tab-container1:nth-child(1){
  margin-top: 2vw;

}
.van-tab-container1-left{
  width: 70%;
  height: 100%;
  /* background-color: aqua; */
  float: left;
}
.van-tab-container1-right{

  width: 30%;
  height: 100%;
  /* background-color: rgb(119, 119, 119); */
  float: right;
  line-height: 15vw;
}
.van-tab-container1-right p{
  margin: 0;
  padding: 0;
}
.van-tab-container1-right2{
  position: relative;
}
.van-tab-container1-icon{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.van-tab-container1-left1{
  width: 25%;
  height: 100%;
  /* background-color: brown; */
  float: left;
}
.van-tab-container1-left2{
  width: 25%;
  height: 100%;
  /* background-color: rgb(143, 143, 143); */
  float: left;

}
.van-tab-container1-left p{
  height: 50%;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 7.5vw;
  font-size: 3vw;

}
.van-tab-container1-left2 p{
  text-align: left;
}
.van-tab-container1-right1,.van-tab-container1-right2{
  float: left;
  width: 50%;
  height: 100%;
  font-size: 2vw;
}
::v-deep.van-nav-bar{
  background-color: black;
}
</style>
